<template>
    <div class="customer-main">
      <Balance
      ref="balance"
        :showTitle="true"
        :showColumn="false"
        :show-date="false"
        :search-placeholder="distinguish.placeholder"
        :title="distinguish.title"
      >
      </Balance>
  
      <div class="content">
            <router-view></router-view>
      </div>
    </div>
  </template>
  <script setup lang="ts" name="">
  import { ref,computed,watch } from "vue";
  import Balance from "@/components/Balance/index.vue";
  import {useRoute} from "vue-router";

  interface Distinguish{
         title:string;
         placeholder:string;

  }


  const balance =  ref<InstanceType<typeof Balance>>();
  const route = useRoute();
  
  const distinguish = computed(():Distinguish=>{
      switch(route.path){
        default:  
        case '/account/collect/goods/index':
        return {
            title:'收藏的商品',
            placeholder:'商品搜索'
        }

        case '/account/collect/factory/index':
        return {
            title:'收藏的工厂',
            placeholder:'工厂搜索'
        }
      }   
  })

  watch(()=>route.path,()=>{  //重置搜索
       balance.value?.initSearchText("")
  })


 
  
  
  </script>
  <style scoped lang="scss">
  @media screen and (min-width: $pc-min-width) {
    @import "./pc.scss";
  }
  </style>
  